<template>
  <div class="clientPersonChoose">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <el-form ref="personData" :model="personData" :rules="rules" label-width="100px">
        <el-form-item label="姓名：" prop="personName">
          <el-input
            v-model="personData.personName"
            maxlength="50"
            show-word-limit
            class="show-word-limit"
            placeholder="请输入客户姓名"
          />
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="personData.sex" label="男">男</el-radio>
          <el-radio v-model="personData.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input
            v-model="personData.email"
            placeholder="请输入邮箱地址"
            class="show-word-limit-52"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="移动电话：" prop="mobileTel">
          <el-input v-model="personData.mobileTel" placeholder="请输入移动电话号码" type="tel" />
        </el-form-item>
        <el-form-item label="固定电话：" prop="telephone">
          <el-input
            v-model="personData.telephone"
            placeholder="请输入固定电话号码"
            maxlength="50"
            show-word-limit
            class="show-word-limit"
          />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input
            v-model="personData.userNote"
            maxlength="255"
            show-word-limit
            type="textarea"
            :rows="2"
            class="show-word-limit"
            :autosize="{ minRows: 2 }"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ValidPhone } from '@/utils/validate'
const validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!ValidPhone(value)) {
    callback(new Error('请输入正确的11位手机号码'))
  } else {
    callback()
  }
}
export default {
  name: 'ClinetPersonChoose',
  data() {
    return {
      dialogVisible: false,
      title: '客户联系人',
      personData: {
        personId: null,
        personName: '',
        sex: '',
        email: '',
        mobileTel: null,
        telephone: null,
        userNote: ''
      },
      rules: {
        personName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
        mobileTel: [{ required: true, validator: validPhone, trigger: 'blur' }]
      },
      type: ''
    }
  },
  methods: {
    is(type, data) {
      this.dialogVisible = true
      this.type = type
      if (type === 'edit') {
        this.title = '编辑客户联系人'
        this.personData = JSON.parse(JSON.stringify(data))
        this.personData.personId = data.personId
      } else {
        this.title = '修改客户联系人'
      }
    },
    close() {
      this.$emit('closePersonDialog')
      this.dialogVisible = false
      this.personName = ''
      this.sex = ''
      this.email = ''
      this.mobileTel = null
      this.telephone = null
      this.userNote = ''
      this.personId = null
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
          this.close()
        })
        .catch((_) => {})
    },
    submitForm() {
      this.$refs['personData'].validate((valid) => {
        if (valid) {
          this.$emit('personSubmit', this.personData, this.type)
          this.close()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.clientPersonChoose {
  /deep/.el-dialog__body {
    padding: 30px 60px;
  }
  /deep/label {
    font-weight: 500;
  }
}
</style>
